<template>
	<view class="container">
		<view class="showing-movie-title">
			<view class="title-line"></view>
			<view class="showing-movie-title_text">最新电影</view>
			<view class="showing-movie-title_hint">本模块信息由豆瓣电影提供</view>
		</view>
		<swiper class="swiper-view" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval"
		 :duration="swiper.duration" previous-margin="25px" next-margin="25px" @change="swiperChange">
			<block v-for="(item,index) in top_subs" :key="index">
				<swiper-item class="swiper-item" >
					<view class="swiper-item_content" @click="swiperClick(item.subject)">
						<image class="swiper-item_image" :src="replaceUrl(item.image)"></image>
						<view class="swiper-item_casts">
							<view class="swiper-item_title line_height">{{item.title}}</view>
							<view class="line_height item-content">{{item.duration}}</view>
						</view>
						<view class="item-content">评分：{{item.score}}</view>
						<view class="swiper-item_casts item-content">
							<view>演员：</view>
							<view>{{item.actor}}</view>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>

		<view class="showing-movie-title">
			<view class="title-line" style="background-color:#daa520;"></view>
			<view class="showing-movie-title_text">电影TOP250</view>
		</view>
		<view class="content-center-hor" @click="_top250_click">
			<image mode="widthFix" class="top250-image" :src="top250_pic"></image>
		</view>
	</view>
</template>

<script>
	import {
		movieDetail,
		movieTop250
	} from '@/router.js'
	export default {
		data() {
			return {
				loading: true,
				subjects: [],
				top_subs: [1],
				swiper: {
					indicatorDots: true,
					vertical: false,
					autoplay: false,
					interval: 2000,
					duration: 500,
				},
				swiper_itemId: 0,
				top250_pic: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/43b2ee48-dc23-47ee-811d-ac9e1e62aec0.jpg'
			}
		},
		onLoad() {
			this.getMovieShowing();
			// this._get_movie_pic();
		},
		methods: {
			replaceUrl(image_url) {
				if (image_url == null)
					return image_url
				image_url = image_url.replace('https:', 'https://images.weserv.nl/?url=https:')
				return image_url
			},
			//轮播图点击事件
			swiperClick(subject) {
				console.log(subject)
				uni.navigateTo({
					url: movieDetail + `?subject=${subject}`,
				})
			},
      swiperChange(){

      },
			// 获取正在热映的电影
			getMovieShowing: function(city) {
				uni.showLoading({
					title: '加载中',
				})
				uniCloud.callFunction({
					name: 'api-request',
					data: {
						action: 'getMovieShowing'
					},
					success: res => {
						console.log("getMovieShowing", res)
						uni.hideLoading()
						var movieObj = res.result.data;
						console.log("一条电影数据", movieObj[0])
						this.top_subs = movieObj.length>10 ? movieObj.slice(0, 10) : movieObj
						this.swiper_itemId = movieObj[0].subject
					},
					fail: err => {
						console.error(err)
						uni.hideLoading()
					}
				})
			},
			//电影Top250点击
			_top250_click: function() {
				uni.navigateTo({
					url: movieTop250
				})
			}
		},
	}
</script>

<style>
	page {
		padding-bottom: 40px;
	}

	view {
		font-size: 14px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
	}

	text {
		display: flex;
		font-family: PingFangSC-Regular;
		font-weight: 500;
	}

	.showing-movie-title {
		height: 40px;
		display: flex;
		flex-direction: row;
	}

	.title-line {
		width: 5px;
		height: 18px;
		background-color: #8c4356;
		margin: auto 15px;
		margin-right: 10px;
		border-radius: 2px;
	}

	.showing-movie-title_text {
		font-size: 17px;
		color: #161823;
		margin: auto 0px;
	}

	.showing-movie-title_hint {
		font-size: 14px;
		color: #161823;
		margin: auto 10px;
	}

	.swiper-view {
		height: 532px;
		width: 100%;
	}

	.swiper-item {
		background: white;
	}

	.swiper-item_content {
		/* padding: 15px; */
		/* background: #B0E0E6; */
		/* background: #D8BFD8; */
		/* background: #E6E6FA; */
		background: #b0c4de;
		border-radius: 7px;
		margin: 6px;
		display: flex;
		height: 98%;
		flex-direction: column;
		/* align-items: center;
  justify-content: center; */
		color: white;
		box-shadow: 0 0 3px #555;
	}

	.swiper-item_image {
		width: 100%;
		height: 80%;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
	}

	.swiper-item_casts {
		display: flex;
		flex-direction: row;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.swiper-item_title {
		font-size: 20px;
		color: #bf5635;
		font-weight: bold;
		margin-left: 10px;
	}

	.line_height {
		line-height: 39px;
		/** 垂直居中 **/
	}

	.item-content {
		color: #222733;
		margin-left: 10px;
	}

	.top250-view {
		width: 100%;
		background: #e6e6fa;
		padding: 5px;
		color: #daa520;
		font-weight: bold;
		font-size: 17px;
		margin-top: 20px;
	}

	.top250-image {
		width: 90vw;
	}
</style>
